<template>
	<view>
		<public-module></public-module>
		<view class="coupon" v-if="list && list.length!=0">
			<view v-for="(item,index) in list" :key="index" class="coupon-item" :class="item.status == 2?'nouse_bg':''"
				@click="onUse(item)">
				<!-- 1未使用 2已使用 -->
				<view class="coupon-item-fl">
					<text>优惠卡包</text>
				</view>
				<view class="coupon-item-fr">
					<view class="fl">
						<text class="title">{{item.good_title}}</text>
						<text class="time">领取时间:{{item.created_at}}</text>
					</view>
					<view class="fr" v-if="item.status == 1">去使用</view>
					<view class="fr nouse" v-if="item.status == 2">已使用</view>
				</view>
			</view>
		</view>
		<u-empty v-else mode="order" text="优惠卡包为空"></u-empty>
		<u-popup :show="show" mode="center" @close="close"
			customStyle="height: 200px;width: 200px;background:rgba(255, 255, 255, 0)">
			<!-- <view> -->
			<uqrcode ref="uqrcode" canvas-id="qrcode" :value="src" :options="{ margin: 10 }"></uqrcode>
			<!-- </view> -->

		</u-popup>
	</view>
</template>

<script>
	import fNavbar from '@/components/module/f-navbar/f-navbar';
	import {
		setPay
	} from '@/config/pay';
	import {
		getOrderList
	} from '@/config/api.js';
	import base from '@/config/baseUrl';
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				ossUrl: base.ossUrl,
				shareId: 0,
				show: false,
				src: 'qr',
				list: [],
			}
		},
		onLoad(options) {
			console.log(options)
		},
		onShow() {
			this.getOrders()
		},
		methods: {
			onUse(item) {
				if (item.status == 1) {
					this.src = item.order_no;
					setTimeout(() => {
						this.show = true
					}, 50)
				}

			},
			close() {
				this.show = false
			},
			getOrders() {

				getOrderList({}).then((res) => {
					this.list = res

				}).catch((err) => {
					console.log(err, 'catch')
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	// 卡包新样式
	.coupon {
		display: flex;
		flex-direction: column;
		margin: 20rpx;

		.coupon-item {
			display: flex;
			align-items: center;
			background-image: url('/static/new/cardbg.png'), url('/static/new/cardbg.png'), url('/static/new/cardbg_r.png');
			background-position: 89rpx -11rpx, 89rpx 229rpx, right;
			background-repeat: no-repeat, no-repeat, repeat-y;
			background-color: $uni-newcolor-primary;
			background-size: 22rpx, 22rpx, 22rpx;
			color: #ffffff;
			height: 240rpx;
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			&.nouse_bg {
				background-color: #bbbbbb !important;
			}
		}

		.coupon-item-fl {
			display: flex;
			align-items: center;
			width: 100rpx;
			padding: 0 35rpx;
			height: 100%;
			border-right: 1px dotted rgba(255, 255, 255, 0.6);
			vertical-align: top;
		}

		.coupon-item-fr {
			flex: 1;
			display: flex;
			align-items: center;
			height: 100%;

			.fl {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 20rpx;

				.title {
					font-size: 40rpx;
					line-height: 1.8;
				}

				.time {
					color: rgba(255, 255, 255, 0.7);
					font-size: 22rpx;
					line-height: 1.8;
				}
			}

			.fr {
				width: 140rpx;
				height: 65rpx;
				line-height: 65rpx;
				text-align: center;
				background-color: #ffffff;
				color: $uni-newcolor-primary;
				;
				margin-right: 40rpx;
				border-radius: 8rpx;

				&.nouse {
					color: #7f7f7f !important;
				}
			}
		}
	}
</style>